function colorToRgb(hexColor) {
  // 16进制颜色值的正则
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  // 把颜色值变成小写
  var color = hexColor.toLowerCase();
  if (reg.test(color)) {
    // 如果只有三位的值，需变成六位，如：#fff => #ffffff
    if (color.length === 4) {
      var colorNew = "#";
      for (var i = 1; i < 4; i += 1) {
        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
      }
      color = colorNew;
    }
    // 处理六位的颜色值，转为RGB
    var colorChange = [];
    for (var i = 1; i < 7; i += 2) {
      colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
    }
    return colorChange;
  } else {
    return color;
  }
}

function getDiffAbsolute(hexColor1, hexColor2) {
  const rgbColor1 = colorToRgb(hexColor1);
  const rgbColor2 = colorToRgb(hexColor2);
  let diffAbsolute = 0;

  rgbColor1.forEach((c, index) => {
    diffAbsolute += Math.abs(c - rgbColor2[index]);
  });

  return diffAbsolute;
}

function getOrder(hexMatchColor, colorList) {
  return colorList
    .map((color) => ({
      ...color,
      diff: getDiffAbsolute(color.color, hexMatchColor)
    }))
    .sort((a, b) => a.diff - b.diff);
}

function main() {
  const color = getOrder("#ddd", ["#eee", "#22dd2a", "#ede"]);
  console.log(color);
}

const colorList = [
  {
    color: "#af2a25",
    num: 16,
    tag: "hot", // new
    text: `SCARLET ROUGE经典奶油质地`,
    subText: `润泽`
  },
  {
    color: "#ee3823",
    num: 15,
    tag: "hot", // new
    text: `WILD GINGER经典奶油`,
    subText: `润泽`
  },
  {
    color: "#852733",
    num: 80,
    tag: "new", // new
    text: `IMPASSIONED 奢金限量版`,
    subText: `润泽`
  },
  {
    color: "#852733",
    num: 80,
    tag: "new", // new
    text: `IMPASSIONED全新哑光质地`,
    subText: `哑光`
  },
  {
    color: "#6b090a",
    num: 80,
    tag: "hot", // new
    text: `IMPASSIONED经典奶油质地`,
    subText: `润泽`
  },
  {
    color: "#950f1a",
    num: 69,
    tag: "hot", // new
    text: `NIGHT MAUVE 玫瑰豆沙色`,
    subText: `润泽`
  },
  {
    color: "#C33832",
    num: 15,
    tag: "new", // new
    text: `WILD GINGER全新哑光质地`,
    subText: `哑光`
  },
  {
    color: "#87272b",
    num: 08,
    tag: "hot", // new
    text: `VELVET CHERRY全新哑光质地`,
    subText: `哑光`
  },
  {
    color: "#b02127",
    num: 07,
    tag: "hot", // new
    text: `RUBY RUSH`,
    subText: `哑光`
  },
  {
    color: "#EE2737",
    num: 09,
    tag: "new", // new
    text: `TRUE CORAL全新哑光质地`,
    subText: `哑光`
  },
  {
    color: "#E4002B",
    num: 303,
    tag: "new", // new
    text: `EMPIRE 红桃皇后-新色上市`,
    subText: `润泽`
  },
  {
    color: "#cc3929",
    num: 06,
    tag: "hot", // new
    text: `FLAME 哑光橘红色`,
    subText: `哑光`
  },
  {
    color: "#EE7362",
    num: 307,
    tag: "hot", // new
    text: `DASHING 率性脏橘-新色上市`,
    subText: `哑光`
  },
  {
    color: "#C46C6D",
    num: 510,
    tag: "new", // new
    text: `FASCINATOR 迷情豆沙-新色上市`,
    subText: `哑光`
  },
  {
    color: "#FA5471",
    num: 507,
    tag: "new", // new
    text: `SHOCKING 悸动浅桃-新色上市`,
    subText: `润泽`
  },
  {
    color: "#950f1a",
    num: 38,
    tag: "", // new
    text: `NIGHT PORTER`,
    subText: `哑光`
  },
  {
    color: "#A60A3D",
    num: 508,
    tag: "new", // new
    text: `PRIMAL 原罪玫瑰-新色上市`,
    subText: `润泽`
  },
  {
    color: "#c7253a",
    num: 75,
    tag: "new", // new
    text: `JASMIN ROUGE 玫调偏红色`,
    subText: `润泽`
  },
  {
    color: "#e05038",
    num: 88,
    tag: "hot", // new
    text: `HIRO 细闪偏光橘`,
    subText: `润泽`
  },
  {
    color: "#A51F42",
    num: 63,
    tag: "new", // new
    text: `WILD ORCHID 奢金限量版`,
    subText: `哑光`
  },
  {
    color: "#6A162F",
    num: 08,
    tag: "", // new
    text: `VELVET CHERRY经典奶油`,
    subText: `润泽`
  },
  {
    color: "#BA1B47",
    num: "FF02",
    tag: "hot", // new
    text: `FABULOUS`,
    subText: `润泽`
  },
  {
    color: "#ce5ca2",
    num: 67,
    tag: "", // new
    text: `PRETTY PERSUASIVE`,
    subText: `润泽`
  },
  {
    color: "#AD6C75",
    num: 512,
    tag: "new", // new
    text: `VERVAIN 野生烟粉-新色上市`,
    subText: `哑光`
  },
  {
    color: "#af4460",
    num: 70,
    tag: "", // new
    text: `ADORA`,
    subText: `润泽`
  },
  {
    color: "#e2474f",
    num: 72,
    tag: "", // new
    text: `SWEET TEMPEST`,
    subText: `润泽`
  },
  {
    color: "#cc7e7e",
    num: 04,
    tag: "", // new
    text: `INDIAN ROSE`,
    subText: `润泽`
  },
  {
    color: "#cf5258",
    num: 22,
    tag: "", // new
    text: `FORBIDDEN PINK`,
    subText: `润泽`
  },
  {
    color: "#e02d28",
    num: 74,
    tag: "", // new
    text: `DRESSED TO KILL`,
    subText: `润泽`
  },
  {
    color: "#dd6969",
    num: 35,
    tag: "", // new
    text: `AGE OF CONSENT`,
    subText: `哑光`
  },
  {
    color: "#c73027",
    num: 37,
    tag: "", // new
    text: `BEST REVENGE`,
    subText: `哑光`
  },
  {
    color: "#e14048",
    num: 73,
    tag: "", // new
    text: `VERMILLIONAIRE`,
    subText: `润泽`
  },
  {
    color: "#991b1f",
    num: 76,
    tag: "", // new
    text: `ORIGINAL SIN`,
    subText: `润泽`
  },
  {
    color: "#580e1b",
    num: 10,
    tag: "", // new
    text: `BLACK DAHLIA`,
    subText: `哑光`
  },
  {
    color: "#eb5135",
    num: 71,
    tag: "", // new
    text: `CONTEMPT`,
    subText: `润泽`
  },
  {
    color: "#de4267",
    num: 83,
    tag: "", // new
    text: `STIMULANT`,
    subText: `润泽`
  },
  {
    color: "#ec4630",
    num: 85,
    tag: "", // new
    text: `FOXFIRE`,
    subText: `润泽`
  },
  {
    color: "#cb1d7e",
    num: 03,
    tag: "", // new
    text: `PINK TEASE`,
    subText: `哑光`
  }
];

new Vue({
  el: "#app",
  data() {
    return {
      list: colorList,
      searchTxt: ""
    };
  },
  methods: {
    find() {
      this.list = getOrder(this.searchTxt, this.list);
    }
  }
});
